<template>
  <Card>
    <!-- 主管点评查询 -->
    <Form :model="form" ref="form" :rules="formRule" label-position="right" label-width="90">
      <Row gutter="10">
        <i-col span="6">
          <FormItem label="选择渠道" prop="branchType">
            <Select v-model="form.branchType" clearable>
              <Option v-for="item in saleChannelList" :value="item.key" :key="item.key">{{ item.value }}</Option>
            </Select>
          </FormItem>
        </i-col>
        <i-col span="6">
          <FormItem label="管理机构" prop="managecom">
            <Select v-model="form.managecom" placeholder="请选择" clearable>
              <Option v-for="item in organizationList" :key="item.key" :value="item.key">{{item.value}}</Option>
            </Select>
          </FormItem>
        </i-col>
        <i-col span="6">
          <FormItem label="销售机构" prop="agentgroup">
            <Select v-model="form.agentgroup" clearable @on-change="val=>getBranchmanager(val,{fileByte:'groupDistrict'})">
              <Option v-for="item in agentgroupList" :value="item.key" :key="item.key">{{ item.value }}</Option>
            </Select>
          </FormItem>
        </i-col>
        <i-col span="6">
          <!-- bran -->
          <FormItem label="区部组" prop="groupDistrict">
            <Select v-model="form.groupDistrict" clearable>
              <Option v-for="item in groupDistrictList" :value="item.key" :key="item.key">{{ item.value }}</Option>
            </Select>
          </FormItem>
        </i-col>
      </Row>
      <Row gutter="10">
        <i-col v-if="roleId!='21'" span="6">
          <FormItem label="员工工号" prop="agnetcode">
            <Input placeholder="员工工号" v-model="form.agnetcode" />
          </FormItem>
        </i-col>
        <i-col span="6">
          <FormItem label="保单号" prop="contno">
            <Input v-model="form.contno" clearable placeholder="请输入" />
          </FormItem>
        </i-col>
        <i-col span="6">
          <FormItem label="应交日范围" prop="paytodayRange" :rules="rules">
            <DatePicker :value="paytodayRange" type="daterange" transfer  placeholder="请选择" :clearable="false" style="width:100%" @on-change="paytodayRange=$event"></DatePicker>
          </FormItem>
        </i-col>
        <i-col span="6">
          <FormItem label="点评日期" prop="createTime" :rules="{required:false}">
            <DatePicker :value="form.createTime" format="yyyy-MM-dd" transfer  @on-change="val=>$set(form,'createTime',val)" type="date" placeholder="请选择" />
          </FormItem>
        </i-col>
        <i-col v-if="roleId=='21'" span="6">
          <FormItem label="点评星级" prop="level">
            <Select v-model="form.level" clearable>
              <Option v-for="item in raterList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </FormItem>
        </i-col>
        <i-col v-if="roleId=='21'" span="24" style="display: flex;justify-content: flex-end;">
          <Button type="primary" @click="loadTableData(1)" icon="md-search" style="margin-right:20px;">查询</Button>
          <Button @click="resetForm()" icon="md-refresh">重置</Button>
          <!-- <Button @click="resetForm(),initDay()" icon="md-refresh">重置</Button> -->
        </i-col>
      </Row>
      <Row v-if="roleId!='21'" gutter="10">
        <i-col span="6">
          <FormItem label="点评星级" prop="level">
            <Select v-model="form.level" clearable>
              <Option v-for="item in raterList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </FormItem>
        </i-col>
        <i-col span="18" style="display: flex;justify-content: flex-end;">
          <Button type="primary" @click="loadTableData(1)" icon="md-search" style="margin-right:20px;">查询</Button>
          <Button @click="resetForm()" icon="md-refresh">重置</Button>
        </i-col>
      </Row>
    </Form>
    <Divider />
    <Table :columns="columns" :data="tableData" ref="selection" style="margin-top:10px">
      <template slot-scope="{row}" slot="showDetail">
        <span class="table-button" @click="showWork(row)">查看工作记录</span>
      </template>
      <template slot-scope="{row}" slot="comment">
        <Poptip v-if="row.comment && row.comment.length>20" trigger="hover" width="100" transfer word-wrap :content="row.comment">
          <div>{{row.comment.substr(0,20)}}...</div>
        </Poptip>
        <div v-else>{{row.comment?row.comment:'暂无'}}</div>
      </template>
      <template slot-scope="{ row }" slot="operate">
        <span v-if="roleId==21" class="table-button" @click="reply(row)">回复</span>
		<template v-if="roleId!=21">
           <span v-if="row.count==0" class="table-button" style="color:#ccc">查看回复</span>
		   <span v-else class="table-button" @click="showReply(row)">查看回复</span>
		</template>
      </template>
    </Table>

    <Page :total="ipagination.total" show-sizer show-total style="text-align:right;margin-top:20px" @on-change="handleCurrentChange" @on-page-size-change="handleSizeChange" :page-size-opts="ipagination.pageSizeOptions" :current="ipagination.pageIndex" :page-size="ipagination.pageSize" transfer></Page>

    <Modal title="查看回复" v-model="showReplyModal" footer-hide>
      <div v-for="(item,inx) in replyComment" :key="inx" style="word-break:break-all">{{item.comment}}</div>
    </Modal>
    <Modal title="回复" v-model="replyModal" :mask-closable="false">
      <Input v-model="comment" type="textarea" maxlength="100" show-word-limit clearable placeholder="请输入您的回复" />
      <template #footer>
        <Button @click="replyModal=false" style="margin-right:10px;">取消</Button>
        <Button type="primary" @click="replyModalSubmit" :loading="replyModalLoading">提交</Button>
      </template>
    </Modal>
    <Modal title="历史工作记录" v-model="historyModal" footer-hide width="80%">
      <div style="height:700px;overflow:auto;">
        <history ref="history"></history>
      </div>
    </Modal>
  </Card>
</template>

<script>
import { getSelectListMixin } from "../../util/mixins/getSelectListMixin";
import { loadResourcesMixin } from "../../util/mixins/loadResourcesMixin";
import { tableChangeMixin } from "../../util/mixins/tableChangeMixin";
import {dateFormat} from "../../util/utils"
import History from "./components/historyW.vue"
export default {
  name: "commentList",
  mixins: [getSelectListMixin,loadResourcesMixin, tableChangeMixin],
  components:{History},
  data() {
    return {
		row:{},//点击的行
		roleId:'',//21专员
      mixinData: {
		disableMixinCreated:true,
        tableAxios: "supervisorevaluation",
      },
	  form:{},
	  paytodayRange:[],//
      agentgroupList: [],
	  saleChannelList: [],
	  organizationList:[],
	  groupDistrictList:[],//区部组
    	raterList:[{
        value: '0',
        label: '0星'
      },
      {
        value: '1',
        label: '1星'
      },
      {
        value: '2',
        label: '2星'
      },{
        value: '3',
        label: '3星'
      },{
        value: '4',
        label: '4星'
      },{
        value: '5',
        label: '5星'
      },],
      branList: [],
      columns: [
        {
          title: "序号",
          type: "index",
          align: "center",
		  width:80
        },
        {
          title: "管理机构",
          key: "managecomName",
          align: "center",
		  minWidth:120
        },
        {
          title: "渠道",
          key: "branchType",
          align: "center",
		  minWidth:120
        },
        {
          title: "保单号",
          key: "contno",
          align: "center",
		  minWidth:180
		  
        },
        {
          title: "专员",
          key: "renewalname",
          align: "center",
		  width:120
        },
        {
          title: "应交日",
          key: "paytodate",
          align: "center",
		  width:120,
		  render: (h, params) => {
			return h('div', params.row.paytodate.substr(0, 10));
		 }
        },
        {
          title: "投保人",
          key: "appntname",
          align: "center",
		  width:120
        },
        {
          title: "服务日期",
          key: "planDate",
          align: "center",
		  width:120
        },
        {
          title: "服务详情",
          key: "showDetail",
		  slot: "showDetail",
          align: "center",
		  width:140
        },
        {
          title: "点评人",
          key: "commentname",
          align: "center",
		  width:120
        },
        {
          title: "点评星级",
          key: "level",
          align: "center",
		  width:120,
		  render: (h, params) => {
			return h('div', params.row.level+'星');
		 }
        },
        {
          title: "点评内容",
          key: "comment",
		  slot: "comment",
          align: "center",
		  minWidth:120
        },
        {
          title: "操作",
          key: "operate",
          slot: "operate",
          align: "center",
          width: "120",
          fixed: "right",
        },
      ],
      tableData: [],
      showReplyModal: false,
	  replyComment:[],
      replyModal: false,
	  comment:"",//回复
      replyModalLoading: false,
      historyModal: false,
	  rules: {
		required: true,
		message: "应交日范围不能为空",
		type: 'daterange',
	  },
	formRule:{
		managecom:[{
			required: true,
            message: "请选择管理机构"
		}]
	 }
	}
	
  },
  mounted() {
    // this.getOrganization();
    // this.selectbranchmanager();
	this.roleId=sessionStorage.getItem("roleId")
	this.initDay()
  },
  methods: {
	initDay(){		
		let lastMounth=new Date(new Date().toLocaleDateString()).getTime() - 31 * 24 * 3600 * 1000
		this.paytodayRange=[dateFormat(lastMounth,"YY-MM-DD"),dateFormat(new Date(),"YY-MM-DD")]
	},
	loadTableData(type){
		if(this.paytodayRange.length==0){
			if(type==1){
				this.$Message.info("请选择应交日范围")
			    return
			}else{
				this.initDay()
			}
			
		}
		if(!this.form.managecom){
			this.$Message.info("请选择管理机构")
			    return
		}		
		let obj=JSON.parse(JSON.stringify(this.form))
		this.form.paytodaystart=dateFormat(this.paytodayRange[0])
		this.form.paytodayend=dateFormat(this.paytodayRange[1])
		// let obj=
		// Object.keys(obj).forEach(key => {
		//      if(!obj[key] && obj[key]!==0){
		// 		delete obj[key]
		// 	 } 
        // })
		// console.log(obj)
		this.loadResources()
		// this.api.supervisorevaluation(obj).then((res) => {
        //     if (res.code == 200 && res.data != null) {
        //         this.ipagination.total = res.data.total;
        //         this.tableData = res.data.records;
		// 	}
		// })
	},
	// 重置表单
    resetForm() {
      this.$refs.form.resetFields();
	  this.paytodayRange=[]
	  this.initDay()
	},	
    showReply(row) {
		let obj={
			commentid:row.commentid,
			planid:row.plainid,
			workid:row.workid,
			plancommentid:row.plancommentid
		}
		this.api.selectReplyToComment(obj).then((res) => {
            if (res.code == 200) {
				this.replyComment=res.data
				if(res.data.length>0){
				this.showReplyModal = true;
				}else{
					this.$Message.info("无回复")
				}
			}else{
				this.$Message.info(res.msg)
			}
		})
      
    },    
	reply(row) {
		this.row=row
      this.replyModal = true;
    },
    replyModalSubmit() {
		if(!this.comment){
			return this.$Message.info("请输入回复")
		}
      this.replyModalLoading = true;
	  let obj={
			commentid:this.row.commentid,
			planid:this.row.plainid,
			workid:this.row.workid,
			// useragentcode:'',
			comment:this.comment,
			plancommentid:this.row.plancommentid
	  }
	  this.api.replyToComment(obj).then((res) => {
        if (res.code == 200) {         
		   this.replyModal = false
		   this.replyModalLoading = false
		   this.comment=""
        }
		 this.$Message.info(res.msg)
      });
    },
	showWork(row) {
		this.$refs.history.getHistoryList(row)
		this.historyModal = true
	},
    getOrganization() {
      this.organiztions = [];
      this.api.managecomList().then((res) => {
        if (res.code == 200 && res.data != null) {
          this.organiztions = res.data;
        }
      });
    },
    selectbranchmanager() {
      this.branList = [];
      this.api.selectbranchmanager().then((res) => {
        if (res.code == 200 && res.data != null) {
          this.branList = res.data;
        }
      });
    },
  },
};
</script>
<style lang="less">
.notwrap {
  max-width: 100px;
  word-break: keep-all;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ivu-icon-ios-loading {
  display: none !important;
}
</style>
